package com.tencent.compose.sample.mainpage.sectionItem

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.lazy.itemsIndexed
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import org.jetbrains.compose.ui.tooling.preview.Preview

@Preview()
@Composable
internal fun LazyRowDemo() {
    val itemsList = (0..100).toList()
    val itemsIndexedList = listOf("A", "B", "C")

    // 水平滚动列表（LazyRow）
    LazyRow(
        modifier = Modifier
            .background(Color.LightGray.copy(alpha = 0.2f))
            .padding(16.dp),
        // 列表项之间的间距（关键：避免文字挤在一起）
        horizontalArrangement = androidx.compose.foundation.layout.Arrangement.spacedBy(12.dp)
    ) {
        // 1. 渲染第一个列表（itemsList：0-5）
        items(itemsList) { number ->
            Text(
                text = "Item is $number",
                fontSize = 16.sp,  // 文字大小
                color = Color.Black
            )
        }

        // 2. 渲染单个列表项（分隔用）
        item {
            Text(
                text = "Single item",
                fontSize = 16.sp,
                color = Color.Red
            )
        }

        // 3. 渲染带索引的列表（itemsIndexedList：A/B/C）
        itemsIndexed(itemsIndexedList) { index, letter ->
            Text(
                text = "Index $index: $letter",
                fontSize = 16.sp,
                color = Color.Blue
            )
        }
    }
}